<template>
  <view class="oto-textarea" :style="[getStyle, ...otherStyle]">
    <textarea
      :placeholder-style="getPlaceholderStyle"
      :value="value"
      :placeholder="placeholder"
      :maxlength="maxlength"
      @input="input"
      :type="type"
      @confirm="doConfirm"
      class="input"
      :adjust-position="adjustPosition"
      :focus="focus"
      :auto-blur="autoBlur"
      @keyboardheightchange="keyboardheightchange"
      @blur="blur"
      :auto-height="autoHeight"
      :show-confirm-bar="showConfirmBar"
      @linechange="linechange"
      :disabled="disabled"
    />
    <view class="font-count" v-if="fontCount"
      >{{ getFontCount }}/<text class="font-count-max">{{ maxlength }}</text></view
    >
  </view>
</template>

<script>
  import * as otoUtils from '@/components/utils/index';

  export default {
    props: {
      width: {
        type: String,
        default: '670'
      },
      height: {
        type: String,
        default: '242'
      },
      customStyle: {
        type: Object,
        default() {
          return {};
        }
      },
      otherStyle: {
        type: Array,
        default() {
          return [];
        }
      },
      placeholder: {
        type: String,
        default: '请填写内容'
      },
      maxlength: {
        type: Number,
        default: 500
      },
      value: {
        type: [String, Number],
        default: ''
      },
      fontCount: {
        type: Boolean,
        default: false
      },
      focus: {
        type: Boolean,
        default: false
      },
      autoBlur: {
        type: Boolean,
        default: false
      },
      adjustPosition: {
        type: Boolean,
        default: false
      },
      autoHeight: {
        type: Boolean,
        default: false
      },
      showConfirmBar: {
        type: Boolean,
        default: false
      },
      placeholderStyle: {
        type: Object,
        default() {
          return {};
        }
      },
      disabled: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {};
    },
    computed: {
      getStyle() {
        let style = {};
        style.width = this.width ? `${this.width}rpx` : '';
        style.height = this.height ? `${this.height}rpx` : '';
        style = {
          ...style,
          ...this.customStyle
        };
        return style;
      },
      getPlaceholderStyle() {
        const placeholderStyle = this.placeholderStyle || {};
        const customStyle = this.customStyle;
        if (!placeholderStyle.fontSize) {
          customStyle.fontSize && (placeholderStyle.fontSize = customStyle.fontSize);
        }
        let placeholderStyleStr = '';
        Object.keys(placeholderStyle).map((key) => {
          placeholderStyleStr += `${key.replace(/[A-Z]/g, (item) => `-${item.toLowerCase()}`)}: ${
            placeholderStyle[key]
          };`;
        });
        return placeholderStyleStr;
      },
      getFontCount() {
        return this.value.length;
      }
    },
    mounted() {
      this.$otoFormItem = otoUtils.$parent(this, 'OtoFormItem');
    },
    methods: {
      input(e) {
        this.$emit('oto-input', e);
        this.$emit('input', e.detail.value);
        if (this.$otoFormItem) {
          setTimeout(() => {
            this.$nextTick(() => {
              this.$otoFormItem.validate({ event: e, value: e.detail.value });
            });
          }, 10);
        }
      },
      doConfirm(e) {
        this.$emit('confirm', e);
      },
      keyboardheightchange(e) {
        this.$emit('keyboardheightchange', e);
      },
      blur(e) {
        this.$emit('blur', e);
      },
      focusNow(e) {
        this.$emit('focus', e);
      },
      linechange(e) {
        this.$emit('linechange', e);
      }
    }
  };
</script>

<style lang="scss" scoped>
  .oto-textarea {
    border-radius: 40rpx;
    opacity: 1;
    background: rgba(255, 255, 255, 1);
    opacity: 1;
    color: rgba(70.13, 70.13, 70.13, 1);
    font-size: 28rpx;
    font-weight: 400;
    font-family: 'Lalezar';
    position: relative;

    textarea {
      width: 100%;
      height: 100%;
    }

    .font-count {
      position: absolute;
      bottom: 26rpx;
      right: 34rpx;
      padding: 8rpx 12rpx 8rpx 12rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 18rpx;
      opacity: 1;
      background: rgba(235, 235, 235, 1);
      font-size: 24rpx;
      color: #c4c4c4;

      .font-count-max {
        color: #000;
      }
    }
  }
</style>
